<template>
	<view class="container">
		<view class="header">
			<view class="search">
				<u-search placeholder="请输入产品" v-model="keyword" :showAction="false" bgColor="#f7f8fa"
					@search="onRefresh"></u-search>
			</view>
		</view>

		<scroll-view class="scroll-view-item" :scroll-y="true" :scroll-top="top" :lower-threshold="100"
			:refresher-triggered="Triggered" :refresher-enabled="enableRefresh" @refresherrefresh="throttledOnRefresh"
			@scrolltolower="OnBottom" @scroll="OnScroll" :style="{ height: `${height}px` }">
			<navigator :url="`/pages/validate/info?code=${item.query_code}`" class="item" v-for="item in ProductList"
				:key="item.id">
				<view class="title">
					{{item.product.name}}
				</view>

				<view class="line"></view>

				<view class="son-list">
					<view class="son-item">
						<view class="name">
							查询次数：
						</view>
						<view class="value">
							{{item.query_num}}
						</view>
					</view>

					<view class="son-item">
						<view class="name">
							您查询的防伪码：
						</view>
						<view class="value">
							{{item.query_code}}
						</view>
					</view>

					<view class="son-item">
						<view class="name">
							首次查询时间：
						</view>
						<view class="value">
							{{item.query_time_text}}
						</view>
					</view>

					<view class="son-item">
						<view class="name">
							二维码：
						</view>
						<view class="value">
							<image src="/static/images/code.png" />
						</view>
					</view>
				</view>
			</navigator>
			<u-loadmore :status="status" marginBottom="40" fontSize="20" lineColor="#1CD29B" dashed line />
		</scroll-view>
		<!-- 消息提醒 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>
<script>
	import {
		throttle
	} from '@/services/throttle.js';
	export default {
		data() {
			return {
				Triggered: false, // 下拉刷新状态
				Isfreshing: false, //防止重复刷新
				enableRefresh: false,
				ProductList: [],
				page: 1,
				business: {},
				status: 'loadmore',
				keyword: '',
				height: 0, //页面高度
				top: 0,
			}
		},
		onShow() {
			//获取本地存储
			let business = uni.getStorageSync('business') ? uni.getStorageSync('business') : {};
			// 判断对象是否为空
			if (Object.getOwnPropertyNames(business).length > 0) {
				this.business = business
				this.onRefresh();
			} else {
				//没有登录
				uni.$u.route({
					type: 'reLaunch',
					url: 'pages/validate/validate'
				})
			}
		},
		onReady() {
			//调用uni接口 获取页面的高度
			uni.getSystemInfo({
				success: res => {
					this.height = res.windowHeight;
				},
			});
		},
		methods: {
			scrollTolower() {

			},
			throttledOnRefresh() {
				throttle(
					this.onRefresh(), 1000)
			},
			onRefresh() {
				//下拉刷新
				//防止重复下拉刷新
				if (this.Isfreshing) return;

				//执行一次下拉刷新
				this.Isfreshing = true;

				//判断是否处于下拉刷新中
				if (!this.Triggered) this.Triggered = true; //正在下拉刷新中

				this.ProductList = [];
				this.page = 1;

				//请求数据
				this.ProductData();
			},
			async ProductData() {
				//请求中
				let result = await this.$u.api.productIndex({
					busid: this.business.id,
					page: this.page,
					keyword: this.keyword
				})

				if (this.Triggered) this.Triggered = false;
				if (this.Isfreshing) this.Isfreshing = false;
				this.status = "loadmore";

				if (result.code == 0) {
					//没有更多数据
					this.status = "nomore";
					return false
				}

				this.ProductList = this.ProductList.concat(result.data);
				this.page++;
			},
			OnBottom() {
				this.ProductData();
			},
			OnScroll(e) {
				this.top = e.detail.scrollTop;
				if (this.top < 150) {
					this.enableRefresh = true; // 启用下拉刷新
				} else {
					this.enableRefresh = false; // 禁用下拉刷新
				}
			},
		}
	}
</script>

<style>
	page {
		background-color: #eee;
	}

	.container {
		width: 95%;
		margin: 0 auto;
	}

	.header {
		background-color: #fff;
		padding: 10px 0;
		margin-top: 10px;
		border-radius: 10px;
	}

	.header .search {
		width: 95%;
		margin: 0 auto;
	}

	.item {
		background: #fff;
		border-radius: 10px;
		overflow: hidden;
		margin-top: 10px;
		padding: 0 10px 10px;
	}

	.item .title {
		padding: 10px 0 10px 10px;
		font-size: 20px;
	}

	.item .line {
		width: 100%;
		height: 1px;
		background: #ebebeb;
		margin: 0 auto;
		margin-bottom: 10px;
	}

	.item .son-list .son-item {
		display: flex;
		justify-content: space-between;
		font-size: 14px;
		margin-bottom: 10px;
	}

	.item .son-list .son-item .name {
		color: #9b9b9a;
	}

	.item .son-list .son-item image {
		width: 30px;
		height: 30px;
	}
	
	.scroll-view-item{
	  height: calc(100% - 3rem);
	  width: 100%;
	  background: #f2f7fa;
	  padding-top: .3rem
	}

</style>